
<template>
    <div class="signature-pad" :style="{paddingTop:(windowInnerHeight - Math.ceil((windowInnerWidth - 10)/2.15))/10 +'px'}" :key="signedVersionKey">
        <!-- 搞标题 -->
        <div v-if="stepNum == 1">
            <div class="meetingAttendanceFilling-table-content">
                <h2 style="margin-bottom: 20px;color: #38f;font-weight: 600;">参会人员签到</h2>
                <div class="inspector-table-from-d" id="frylx" v-if="!(queryData.hymx && queryData.hymx.frylx == '观察员')">
                    <div class="inspector-table-text">
                        <span class="table-text-s"><span class="inspector-asterisk-v">*</span>人员类型</span>
                        <span>：</span>
                    </div>
                    <div class="right-content-v">
                        <a-radio-group
                            name="radioGroup"
                            style="width: 100%;"
                            v-model="formField.frylx"
                        >
                            <a-radio value="企业关键人员">企业关键人员</a-radio>
                            <a-radio value="企业一般人员">企业一般人员</a-radio>
                            <a-radio value="审评员">
                              <span style="width: 84px;display: inline-block;text-align: left;">审评员</span>
                            </a-radio>
                            <a-radio value="观察员">
                              <span style="width: 84px;display: inline-block;text-align: left;">观察员</span>
                            </a-radio>
                        </a-radio-group>
                    </div>
                </div>
                <div v-if="formField.frylx == '企业关键人员' || formField.frylx == '企业一般人员'">
                    <div class="inspector-table-from-d" id="fbm">
                      <div class="inspector-table-text">
                          <span class="table-text-s"><span class="inspector-asterisk-v">*</span>部门职务</span>
                          <span>：</span>
                      </div>
                        <div class="right-content-v">
                          <a-select v-if="formField.frylx == '企业关键人员'" v-model:value="formField.fbm" style="width: 100%" @change="dataChange(formField.fbm,'fbm')">
                            <a-select-option v-for="(item,index) in keyPersonnelList" :key="item.value">{{ item.value }}</a-select-option>
                          </a-select>
                          <a-input v-else style="width: 100%;" v-model:value="formField.fbm" placeholder="请输入部门" @change="dataChange(formField.fbm,'fbm')"/>
                        </div>
                    </div>
                    <div class="tips-flex" :key='currentIdKey' v-if="currentIdArr.indexOf('fbm') !== -1"><span class="tips-text-v">请输入部门职务</span></div>
                    <div class="inspector-table-from-d" >
                      <div class="inspector-table-text">
                          <span class="table-text-s"><span class="inspector-asterisk-v">*</span>是否宣读审评纪律</span>
                          <span>：</span>
                      </div>
                        <div class="right-content-v" style="text-align: left;">
                          <a-radio-group
                            name="radioGroup"
                            v-model="formField.fjlxdzt"
                          >
                            <a-radio value="已宣读">已宣读</a-radio>
                            <a-radio value="未宣读">未宣读</a-radio>
                          </a-radio-group>
                          <div v-if="formField.fjlxdzt == '未宣读'">
                            <a-button class="blue-btn" type="primary" @click.stop.prevent="readingChange()">阅读</a-button>
                            <span style="font-size: 14px;font-weight: 600;display: inline-block;width: 110px;text-align: left;" :style="{color:isReading?'#66c24f':'#ed5565'}">（{{isReading?'已读':'未读'}}）</span>
                          </div>
                          
                        </div>
                    </div>
                    <!-- <div class="inspector-table-from-d" id="fzw">
                        <div class="inspector-table-text">
                            <span class="table-text-s"><span class="inspector-asterisk-v">*</span>
                            <span style="flex: 1;display: flex;justify-content: space-between">
                            <span>职</span>
                            <span>务</span>
                            </span>
                        </span>
                            <span>：</span>
                        </div>
                        <div class="right-content-v">
                            <a-input style="width: 100%;" v-model:value="formField.fzw" placeholder="请输入职务" @change="dataChange(formField.fzw,'fzw')"/>
                        </div>
                    </div>
                    <div class="tips-flex" :key='currentIdKey' v-if="currentIdArr.indexOf('fzw') !== -1"><span class="tips-text-v">请输入职务</span></div> -->
                    <div class="inspector-table-from-d" id="qm" v-if="!(queryData.hymx && queryData.hymx.frylx == '观察员')">
                        <div class="inspector-table-text">
                            <span class="table-text-s"><span class="inspector-asterisk-v">*</span>人员签名</span>
                            <span>：</span>
                        </div>
                        <div class="right-content-v"></div>
                    </div>
                    <div v-if="!(queryData.hymx && queryData.hymx.frylx == '观察员')" @touchmove.prevent="preventScroll">
                      <canvas ref="canvas" @touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing" @touchcancel="stopDrawing"></canvas>
                    </div>
                    <div class="tips-flex" :key='currentIdKey' v-if="currentIdArr.indexOf('qm') !== -1"><span class="tips-text-v">请填写签名</span></div>
                    <div style="display: flex;justify-content: space-around;" v-if="!(queryData.hymx && queryData.hymx.frylx == '观察员')">
                        <a-button class="fe8939-btn" type="primary" @click="submitTo()">全部提交</a-button>
                        <a-button class="blue-btn" type="primary" @click="clearCanvas()">重签</a-button>
                        <a-button class="blue-btn" type="primary" @click="closeClick()">关闭</a-button>
                    </div>
                    <div v-else>
                      <a-tabs v-model="tcActiveKey" @change="qzChange">
                        <a-tab-pane :key="1" tab="调用签名库">
                            <div style="display: flex;justify-content: center;height: 230px;">
                                <img v-if="signature" :src="signature" alt="" style="width: 172px;height: 80px;border: 1px solid #d9d9d9">
                                <span v-else>签名库为空，请先到签名库维护签字信息！</span>
                            </div>
                            
                        </a-tab-pane>
                        <a-tab-pane :key="2" :tab="signature?'重新制作签名':'制作签名'">
                          <div @touchmove.prevent="preventScroll">
                            <canvas ref="canvas" @touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing" @touchcancel="stopDrawing"></canvas>
                          </div>
                            <div style="display: flex;justify-content: space-between;margin: 0 10px;">
                                <a-button class="blue-btn" type="primary" @click="generateSignature()">生成签名并更新到签字库</a-button>
                                <a-button class="blue-btn" type="primary" @click="clearCanvas()">重签</a-button>
                            </div>
                        </a-tab-pane>
                      </a-tabs>
                      <div style="margin-top: 20px;">
                        <a-button class="fe8939-btn" type="primary" @click="submitAndSignClick()">提交并签名</a-button>
                      </div>
                    </div>
                </div>
                <div v-if="formField.frylx == '审评员' || formField.frylx == '观察员'" class="inspector-identity-box">
                    <a-form-model
                        ref="ruleForm"
                        :model="firstStepData"
                        :rules="rules"
                        layout="horizontal"
                        class="inspector-identity-form"
                    >
                      <div style="display: flex;align-items: center;margin: 0 10px;">
                        <span style="display: flex;margin-bottom: 24px;width: 99px;height: 40px;line-height: 40px;">
                          <span style="color:#f5222d;font-size: 24px;font-weight: 600;line-height: 48px;">*</span>
                          <span style="font-size: 18px;font-weight: 600;align-items: center;">手机号码</span>：
                        </span>
                          <a-form-model-item ref="phone" label="" prop="phone">
                                <a-input
                                style="width: 100%;" 
                                @change="phoneChange"
                                v-model:value="firstStepData.phone"
                                placeholder="请输入手机号码" 
                                />
                            </a-form-model-item>
                      </div>
                      <div style="display: flex;align-items: center;margin: 0 10px;" v-if="isCode">
                        <span style="display: flex;margin-bottom: 24px;width: 99px;height: 40px;line-height: 40px;justify-content: flex-end;">
                          <span style="color:#f5222d;font-size: 24px;font-weight: 600;line-height: 48px;">*</span>
                          <span style="font-size: 18px;font-weight: 600;align-items: center;">验证码</span>：
                        </span>
                        <a-form-model-item ref="code" label="" prop="code" >
                            <a-input
                            style="width: 64%;" 
                            v-model:value="firstStepData.code"
                            placeholder="请输入验证码" 
                            />
                            <a-button 
                                class="inspector-table-code-btn-box"
                                size="small" 
                                :loading="codeLoading"
                                :type="!totalSeconds?'primary':''"
                                @click.stop.prevent="getCode(hourString,minuteString,secondString)">
                                <span class="code-text" v-if="!totalSeconds">{{codeText}}</span>
                                <span class="code-text" v-if="hourString == '00' && minuteString == '00' && secondString == '00' && totalSeconds && !isGetCode ">重新获取</span>
                                <span class="code-text text-color" v-if="hourString !== '00'">{{hourString+'：'+minuteString+'：'+secondString}}</span>
                                <span class="code-text text-color" v-else-if="minuteString !== '00'">{{minuteString+'：'+secondString}}</span>
                                <span class="code-text text-color" v-else-if="secondString !== '00'">{{secondString}}</span>
                            </a-button>
                        </a-form-model-item>
                      </div>
                    </a-form-model>
                    <div v-if="isCode" style="text-align: center;color: #999;">（注：验证码有效时长为30分钟）</div>
                    <div style="display: flex;justify-content: center;">
                        <a-button class="blue-btn" type="primary" @click.stop.prevent="submitToInspector()">验证</a-button>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="stepNum == 2">
          <a-result
              status="success"
              title="提交成功!"
          >
          </a-result>
        </div>
        <a-modal v-model="visible" title="技术审评纪律" :maskClosable="false" :closable="false" :footer="null" :dialogStyle="{top:'20px'}">
          <div>
            <div v-html="htmlContent3"></div>
            <div style="display: flex;justify-content: center;">
              <a-button class="yd-btn" type="primary" @click.stop.prevent="readChange()">已阅读</a-button>
            </div>
            
          </div>
        </a-modal>
    </div>
  </template>
  
    <script>
    import { 
      uploadSqsxHyQmFile, 
      spcySqsxXpjlhySubmit,
      spcySqsxXpjlsendYzm, 
      spcySqsxXpjlverifyPhoneSfczxt, 
      spcySqsxXpjlverifyYzmInit, 
      spcySqsxXpjlqueryXcjcjlContent, 
      jcylxdjcjgetUserSignPhotoLink,
      jcylxdjcjuploadMyQm,
    } from './service/index'
    import validator from '@/common/validator'
    function changeURLParam(url, paramName, newValue) {
        const urlParts = url.split('?');
        const baseUrl = urlParts.shift();
        let queryParams = {};
        
        if (urlParts.length > 0) {
            const paramPairs = urlParts[0].split('&');
            for (let i = 0; i < paramPairs.length; i++) {
                const pair = paramPairs[i].split('=');
                queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
            }
        }

        queryParams[paramName] = newValue;
        let newUrl = baseUrl + '?';
        for (const key in queryParams) {
            if (newUrl.length > baseUrl.length + 1) {
                newUrl += '&';
            }
            newUrl += encodeURIComponent(key) + '=' + encodeURIComponent(queryParams[key]);
        }

        history.replaceState(null, null, newUrl);
    }
    export default {
      data() {
        return {
            drawing: false,
            context: null,
            lastX: 0,
            lastY: 0,
            isPortrait: true,
            screenOrientation:screen.orientation,
            windowOrientation:window.orientation,
            windowInnerHeight:window.innerHeight,
            windowInnerWidth:window.innerWidth,
            imgSrc:'',
            currentId:'',
            currentIdKey:null,
            formField:{
                frylx: '企业关键人员',
                fjlxdzt:'已宣读',
            },
            validateArr:[],
            validateIdData:[
                'fbm','qm',
            ],
            currentIdArr:[],
            frylx: '',
            stepNum: 1,
            signedVersionKey: null,
            isDraw: false,
            Id: '',
            queryData:{},
            form: this.$form.createForm(this, { name: 'fromName' }),
            rules:{
                phone: [{
                    required: true,
                    message: '请输入手机号码',
                    // trigger: 'blur',
                },{
                    pattern: validator.isPhone.reg,
                    message: '请输入正确的手机号码',
                    // trigger: 'blur',
                }],
                code: [{
                    required: true,
                    message: '请输入验证码',
                    // trigger: 'blur',
                }]
            },
            firstStepData:{},
            isCode:false,
            codeText:'获取验证码',
            totalSeconds:null,//总秒数
            hour:0,
            minute:0,
            second:0,
            timer: '',
            isGetCode:false,
            codeLoading:false,
            keyPersonnelList:[{
              value:'企业负责人'
            },{
              value:'生产管理负责人'
            },{
              value:'质量管理负责人'
            },{
              value:'质量受权人'
            },{
              value:'质量管理负责人/质量受权人'
            },{
              value:'药物警戒负责人'
            }],
            visible:false,
            htmlContent3:'',
            isReading:false,
            tcActiveKey:1,
            signature:'',
        };
      },
      computed:{
        hourString () {
            return this.formatNum(this.hour)
        },
        minuteString () {
            return this.formatNum(this.minute)
        },
        secondString () {
            return this.formatNum(this.second)
        }
    },
      mounted() {
        document.title = 'xx“技术审评”审评查验信息一体化智慧管理系统'
        this.context = this.$refs.canvas.getContext('2d');
        this.$nextTick(()=>{
          this.resizeCanvas();
        })
        var str = decodeURIComponent(window.location.href);
        //截取类型
        const startIndex = str.indexOf("?type=") + 6;
        const endIndex = str.indexOf("?id=");
        this.frylx = str.substring(startIndex, endIndex)
        //console.log(this.$route.query)
        this.queryData = JSON.parse(this.$route.query.obj)
        this.Id = this.queryData.id
        if(this.queryData.hymx && this.queryData.hymx.frylx == '观察员'){
          this.formField.frylx = '企业一般人员'
          this.getSignLink()
        }
        spcySqsxXpjlqueryXcjcjlContent({sqsxid:this.queryData.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log('技术审评纪律内容',res)
                    this.htmlContent3 = res.result
                }else{

                }
            })
      },
      beforeDestroy() {
        window.removeEventListener('resize', this.checkScreenOrientation);
      },
      methods: {
        preventScroll(event){
          if (!this.$refs.canvas.contains(event.target)) {
            // 如果不是画布上的事件，则阻止滚动
            event.preventDefault();
          }
        },
        getSignLink(){
            jcylxdjcjgetUserSignPhotoLink({id:this.queryData.hymx.fuserid}).then(res=>{
                if(res.code == 200){//获取签字
                    //console.log('获取签字',res.result.signLink)
                    this.signature = res.result.signLink
                }else{
                    this.signature = ''
                }
            })
        },
          qzChange(val){
            if(val == 2){
                let that = this
                this.$nextTick(()=> {
                    setTimeout(()=>{
                        that.context = this.$refs.canvas.getContext('2d');
                        that.resizeCanvas()
                    },200)
                })
            }
          },
          resizeCanvas() {
              const canvas = this.$refs.canvas;
              // 设置canvas宽度为屏幕宽度的一定比例，例如80%
              // canvas.width = window.innerWidth * 0.8;
              canvas.width = Math.ceil(window.innerWidth - 10);
              // 设置canvas高度为屏幕高度的一定比例，例如80%
              // canvas.height = window.innerHeight * 0.5;
              canvas.height = Math.ceil((window.innerWidth - 10)/2);
          },
          startDrawing(event) {
              this.drawing = true;
              const rect = this.$refs.canvas.getBoundingClientRect();
              // 获取触摸点的页面坐标
              const touch = event.touches[0];
              // 转换为canvas的局部坐标
              this.lastX = touch.clientX - rect.left;
              this.lastY = touch.clientY - rect.top;
          },
          draw(event) {
              if (!this.drawing) {
                //console.log('22',this.drawing)
                this.dataChange(this.drawing,'qm')
                return;
              }else{
                //console.log('55',this.drawing)
                this.dataChange(this.drawing,'qm')
              }
              const rect = this.$refs.canvas.getBoundingClientRect();
              // 获取触摸点的页面坐标
              const touch = event.touches[0];
              // 转换为canvas的局部坐标
              const x = touch.clientX - rect.left;
              const y = touch.clientY - rect.top;
              this.context.lineWidth = 4; // 设置画线的粗细（这里示意设置为5）
              this.context.strokeStyle = 'black'; // 设置画线的颜色
              // 在canvas上绘制线条
              this.context.beginPath();
              this.context.moveTo(this.lastX, this.lastY);
              this.context.lineTo(x, y);
              this.context.stroke();
              // 更新上一个点的坐标
              [this.lastX, this.lastY] = [x, y];
              this.isDraw = true
          },
          stopDrawing() {
              // this.drawing = false;
              // //console.log('33',this.drawing)
              // this.dataChange(this.drawing,'qm')
          },
          clearCanvas() {
              // //console.log('获取路由',this.$route.query.id)
              this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
              this.drawing = false;
              //console.log('44',this.drawing)
              this.dataChange(this.drawing,'qm')
              this.lastX = 0;
              this.lastY = 0;
              this.isDraw = false
          },
          closeClick(){
            if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
              // 调用微信JS-SDK的closeWindow方法关闭当前页面
              WeixinJSBridge.invoke('closeWindow');
            } else {
              // 如果微信JS-SDK未加载，则使用普通方式尝试关闭窗口
              window.close();
            }
          },
          validateChange(val){
              // validateArr
              //validateIdData
              this.validateArr = []
              this.validateIdData.forEach(item=>{
                  if(!val[item]){
                      if(!this.validateArr.filter(l=>l == item).length){
                          this.validateArr.push(item)
                      }
                  }
              })
              //console.log(this.validateArr)
          },
          dataChange(val,key){
            //console.log(val,key)
            if(val){
              if(this.currentIdArr.indexOf(key) !== -1 ){
                this.currentIdArr.splice(this.currentIdArr.indexOf(key),1)
              }
            }else{
              if(this.currentIdArr.indexOf(key) == -1 ){
                this.currentIdArr.push(key)
              }
            }
            //console.log(this.currentIdArr)
            this.currentIdKey = Date.now()
          },
          readingChange(){
            this.visible = true
          },
          readChange(){
            this.visible = false
            this.isReading = true
          },
          
          // 提交
          submitTo(){
              // this.validateChange(this.formField)
              this.validateIdData.forEach(item=>{
                //console.log(this.formField[item])
                if(this.formField[item]){
                  if(this.currentIdArr.indexOf(item) !== -1 ){
                    this.currentIdArr.splice(this.currentIdArr.indexOf(item),1)
                  }
                }else if(!this.formField[item]){
                  if(this.currentIdArr.indexOf(item) == -1 ){
                    this.currentIdArr.push(item)
                  }
                }
              })
              if(this.isDraw == false){
                if(this.currentIdArr.indexOf('qm') == -1 ){
                  this.currentIdArr.push('qm')
                }
              }else{
                if(this.currentIdArr.indexOf('qm') !== -1 ){
                  this.currentIdArr.splice(this.currentIdArr.indexOf('qm'),1)
                }
              }
              //console.log(this.validateIdData)
              if(this.currentIdArr.length){
                this.currentIdKey = Date.now()
                  // this.scrollIntoViewChange(this.validateArr[0])
                  // //console.log(this.validateArr)
                  // this.$message.warning('带星号为必填内容，请填写完整!')
              }else{
                // if(this.isDraw == false){
                //   this.$message.warning('请填写签名!')
                //   return
                // }
                if(this.formField.fjlxdzt == '未宣读' && !this.isReading){
                  this.$message.warning('请先阅读技术审评纪律')
                }else{
                  this.saveSignature()
                }
                  
              }
          },
          generateSignature() {
            let that = this
            this.$confirm({
                title:'您确认要生成签名并更新到签字库吗？',
                onOk() {
                    const canvas = that.$refs.canvas;
                    // 获取canvas元素
                    const dataUrl = canvas.toDataURL()

                    // 创建新的image元素
                    const image = new Image();
                    image.src = dataUrl
                    // 在加载完成时触发事件处理函数
                    image.onload = function() {
                        //console.log('我进不到这里')
                        // 创建新的canvas元素
                        const resizedCanvas = document.createElement('canvas');

                        // 设置resizedCanvas的宽度和高度
                        resizedCanvas.width = 172; // 自定义目标尺寸
                        resizedCanvas.height = 80;
                        // //console.log(image)

                        // 在resizedCanvas上绘制原始图像
                        resizedCanvas.getContext('2d').drawImage(image, 0, 0, resizedCanvas.width, resizedCanvas.height);

                        // 将resizedCanvas转换为Blob对象
                        const base64String  = resizedCanvas.toDataURL("image/png");
                        const base64Data = base64String.split(',')[1];

                        // 将Base64字符串转换为ArrayBuffer
                        const byteCharacters = atob(base64Data);
                        const byteArrays = [];

                        for (let offset = 0; offset < byteCharacters.length; offset += 512) {
                        const slice = byteCharacters.slice(offset, offset + 512);

                        const byteNumbers = new Array(slice.length);
                        for (let i = 0; i < slice.length; i++) {
                            byteNumbers[i] = slice.charCodeAt(i);
                        }

                        const byteArray = new Uint8Array(byteNumbers);
                        byteArrays.push(byteArray);
                        }

                        const blob = new Blob(byteArrays, { type: 'image/png' });

                        // 现在你有一个Blob对象，你可以将其视为File对象
                        const file = new File([blob], 'image.png', { type: 'image/png' });
                        //console.log(file);
                        const fileData = new FormData();
                        fileData.append("file",file);
                        fileData.append("id",that.queryData.hymx.fuserid);

                        jcylxdjcjuploadMyQm(fileData).then(res=>{
                            if(res.code ==  200){
                                that.getSignLink()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    };
                }
            })

          },
          submitAndSignClick(){
            this.currentIdArr = []
            if(this.formField.fbm && this.currentIdArr.indexOf('fbm') !== -1){
              this.currentIdArr.splice(this.currentIdArr.indexOf('fbm'),1)
            }
            if(!this.formField.fbm && this.currentIdArr.indexOf('fbm') == -1){
              this.currentIdArr.push('fbm')
              return
            }
            if(this.currentIdArr.length){
              return
            }
            if(this.formField.fjlxdzt == '未宣读' && !this.isReading){
              this.$message.warning('请先阅读技术审评纪律')
              return
            }
            if(!this.signature){
                this.$message.warning('当前签名库暂无签名，请重新制作签名！')
                return
            }
            let that = this
            this.$confirm({
                title:'您确认要提交并签字吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcySqsxXpjlhySubmit({...that.formField,fuserid:that.queryData.hymx.fuserid,id:that.queryData.id,}).then(res=>{
                        if(res.code == 200){
                          that.stepNum = 2
                          that.signedVersionKey = Date.now()
                          // if(that.queryData.hymx.frylx == '观察员'){
                            const currentUrl = window.location.href;
                            changeURLParam(currentUrl, 'obj', JSON.stringify({
                              fhylx:'首次会议',
                              sqsxid:that.queryData.sqsxid,
                              id:that.queryData.id,
                            }));
                          // }
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
          },
          saveSignature() {
            let that = this
            this.$confirm({
              title:'您确认要提交当前填写的信息及签名吗？',
              onOk() {
                const canvas = that.$refs.canvas;
                // 获取canvas元素
                const dataUrl = canvas.toDataURL()
  
                // 创建新的image元素
                const image = new Image();
                image.src = dataUrl
                // 在加载完成时触发事件处理函数
                image.onload = function() {
                  //console.log('我进不到这里')
                  // 创建新的canvas元素
                  const resizedCanvas = document.createElement('canvas');
  
                  // 设置resizedCanvas的宽度和高度
                  resizedCanvas.width = 172; // 自定义目标尺寸
                  resizedCanvas.height = 80;
                  // //console.log(image)
  
                  // 在resizedCanvas上绘制原始图像
                  resizedCanvas.getContext('2d').drawImage(image, 0, 0, resizedCanvas.width, resizedCanvas.height);
  
                  // 将resizedCanvas转换为Blob对象
                  const base64String  = resizedCanvas.toDataURL("image/png");
                  const base64Data = base64String.split(',')[1];
  
                  // 将Base64字符串转换为ArrayBuffer
                  const byteCharacters = atob(base64Data);
                  const byteArrays = [];
  
                  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
                    const slice = byteCharacters.slice(offset, offset + 512);
  
                    const byteNumbers = new Array(slice.length);
                    for (let i = 0; i < slice.length; i++) {
                      byteNumbers[i] = slice.charCodeAt(i);
                    }
  
                    const byteArray = new Uint8Array(byteNumbers);
                    byteArrays.push(byteArray);
                  }
  
                  const blob = new Blob(byteArrays, { type: 'image/png' });
  
                  // 现在你有一个Blob对象，你可以将其视为File对象
                  const file = new File([blob], 'image.png', { type: 'image/png' });
  
                  //截取id
                  // var jqStr = "?id="
                  // var str = decodeURIComponent(window.location.href);
                  // //截取jqStr之前字符串
                  // var str1 = str.substring(0, str.indexOf(jqStr));
                  // //截取jqStr之后字符串
                  // var str2 = str.substring(str1.length+jqStr.length, str.length);
                  // //console.log('id:',str2)
  
                  //截取类型
                  // const startIndex = str.indexOf("?type=") + 6;
                  // const endIndex = str.indexOf("?id=");
                  // var frylx = str.substring(startIndex, endIndex)
                  // //console.log('扫码类型：',frylx)
  
                  // 在这里你可以对file对象进行操作，例如上传到服务器
                  //console.log(file);
                  const fileData = new FormData();
                  fileData.append("file",file);
                  fileData.append("id",that.Id);
                  fileData.append("fuserid",that.queryData.fuserid);
                  fileData.append("fbm",that.formField.fbm);
                  // fileData.append("fzw",that.formField.fzw);
                  fileData.append("frylx",that.queryData.hymx && that.queryData.hymx.frylx == '观察员'?'观察员':that.formField.frylx);
                  //console.log(that.queryData)
                  if(that.queryData.hymx && that.queryData.hymx.frylx == '观察员'){
                    spcySqsxXpjlhySubmit(fileData).then(res=>{
                      if(res.code ==  200){
                        that.stepNum = 2
                        that.signedVersionKey = Date.now()
                        if(that.queryData.hymx.frylx == '观察员'){
                          const currentUrl = window.location.href;
                          changeURLParam(currentUrl, 'obj', JSON.stringify({
                            fhylx:'首次会议',
                            sqsxid:that.queryData.sqsxid,
                            id:that.queryData.id,
                          }));
                        }
                      }else{
                        that.$message.warning(res.message)
                      }
                    })
                  }else{
                    uploadSqsxHyQmFile(fileData).then(res=>{
                      if(res.code ==  200){
                        that.stepNum = 2
                        that.signedVersionKey = Date.now()
                        if(that.queryData.hymx.frylx == '观察员'){
                          const currentUrl = window.location.href;
                          changeURLParam(currentUrl, 'obj', JSON.stringify({
                            fhylx:'首次会议',
                            sqsxid:that.queryData.sqsxid,
                            id:that.queryData.id,
                          }));
                        }
                      }else{
                        that.$message.warning(res.message)
                      }
                    })
                  }
                  
                };
              }
            })
  
          },
          //审评员
          phoneChange(val){
            if(this.firstStepData.phone && this.firstStepData.phone.length == 11){
                spcySqsxXpjlverifyPhoneSfczxt({phone:this.firstStepData.phone,id:this.Id}).then(res=>{
                    if(res.code == 200){
                      if(res.result == 1){
                        this.isCode = true
                      }else{
                        this.$message.warning('手机号不符合当前签到')
                      }
                        
                    }else{
                        if(res.code !== 200) this.$message.warning(res.message)
                        this.isCode = false
                    }
                    
                })
            }else{
                this.isCode = false
            }
            

          },
          //获取验证码
        getCode(){
            
            if(this.isGetCode && this.second){
              return false
            }
            // this.$refs.ruleForm.validateField('phone', a => {
            //     //console.log(a)
            //   if (!valid) {
                let loginParams = {
                    id:this.Id,
                    phone:this.firstStepData.phone,
                }
                //console.log(loginParams)
                this.codeLoading = true
                spcySqsxXpjlsendYzm(loginParams).then(res=>{
                    if(res.code == 200){
                        this.totalSeconds = 60
                        if (this.totalSeconds > 0) {
                            this.second = this.totalSeconds
                            this.countDowm()
                        }
                        this.isGetCode = true
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.codeLoading = false
                })
              // }
            // })
        },
        countDowm () {
            var self = this
            clearInterval(this.timer)
            this.timer = setInterval(function () {
            if (self.hour === 0) {
                if (self.minute === 0 && self.second === 1){
                  self.isGetCode = false
                }
                if (self.minute !== 0 && self.second === 0) {
                  self.second = 59
                  self.minute -= 1
                } else if (self.minute === 0 && self.second === 0) {
                  self.second = 0
                  // self.$emit('countDowmEnd', true)
                  clearInterval(self.timer)
                } else {
                  self.second -= 1
                }
                
            } else {
                if (self.minute !== 0 && self.second === 0) {
                self.second = 59
                self.minute -= 1
                } else if (self.minute === 0 && self.second === 0) {
                self.hour -= 1
                self.minute = 59
                self.second = 59
                } else {
                self.second -= 1
                }
            }
            }, 1000)
        },
        formatNum (num) {
            return num < 10 ? '0' + num : '' + num
        },
        submitToInspector(){//提交
            this.form.validateFields((err, values) => {
                if(!err){
                    //console.log(values)
                    spcySqsxXpjlverifyYzmInit({...this.firstStepData,id:this.Id,}).then(res=>{
                        if(res.code == 200){
                            //console.log(res,this.formField.frylx)
                            this.$message.success(res.message)
                            if(this.formField.frylx == '观察员'){
                              window.location.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+ 'onSiteInspectionCheckInFirsMeeting?obj='+JSON.stringify({fhylx:'首次会议',sqsxid:this.queryData.sqsxid,...res.result})
                            }else{
                              window.location.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+ 'onSiteInspectionCheckInInspectorCheckIn?obj='+JSON.stringify({fhylx:'首次会议',sqsxid:this.queryData.sqsxid,...res.result})
                            }
                            
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
        },
      }
    };
    </script>
  
    <style lang="less" scoped>
    .signature-pad {
      margin: 0;
      padding: 0;
      /* transform: rotate(90deg); */
      width: 100%;
      height: 100%;
      text-align: center;
  
      position: relative;
      .tips-flex{
          display: flex;
          padding-left: 99px;
          padding-bottom: 5px;
          .tips-text-v{
              color: #f5222d;
          }
      }
      canvas {
        border: 1px solid #000;
        /* width: 100%;
        height: auto; */
      }
      .inspector-identity-box{
        .ant-form-explain{
          text-align: left !important;
        }
        .inspector-table-from-d{
            margin:10px;
            display: flex;
            align-items: center;
            .inspector-asterisk-v{
                color:#f5222d;
                font-size: 24px;
                display: flex;
                width: 6px;
                height: 16px;
                line-height: 21px;
            }
            .inspector-table-text{
                display: flex;
                align-items: center;
                .table-text-s{
                    font-weight: 600;
                    text-align: right;
                    display: flex;
                    justify-content: flex-end;
                    width: 85px;
                    font-size:18px;
                    .inspector-asterisk-v{
                        padding-right: 10px;
                        line-height:27px;
                    }
                    .first-asterisk-v{
                        // line-height: 50px;
                        padding-right: 13px;
                    }
                }
            }
            
            .left-text-v{

            }
            .right-content-v{
                flex: 1;
                font-size:18px;
                .inspector-table-code-btn-box{
                    height: 32px;
                    width: 88px;
                }
                .ant-form-explain{
                    text-align: left;
                }
            }
            .email-suffix-v{
                display: flex;
                align-items: center;
            }
            
            
        }
        .table-from-d-car{
            align-items: flex-start;
            .table-text-car{
                height: 40px;
                line-height: 40px;
            }
        }
      }
      
    }
    .yd-btn{
        font-size: 18px;
        height: 45px !important;
        border-radius: 22.5px;
        background-color: #fe8939;
        border-color: #fe8939;
        width: 100%;

      }
    .meetingAttendanceFilling-table-content {
      .inspector-table-from-d{
          margin:10px;
          display: flex;
          align-items: center;
          .inspector-asterisk-v{
              color:#f5222d;
              font-size: 24px;
              display: flex;
              width: 6px;
              height: 16px;
              line-height: 21px;
          }
          .inspector-table-text{
              display: flex;
              align-items: center;
              .table-text-s{
                  font-weight: 600;
                  text-align: right;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  width: 85px;
                  font-size:18px;
                  .inspector-asterisk-v{
                      padding-right: 13px;
                  }
                  .first-asterisk-v{
                      // line-height: 50px;
                  }
              }
          }
  
          .left-text-v{
  
          }
          .right-content-f{
              flex: 1;
              font-size:18px;
              input {
                background: #fff;
                font-size: 26px;
              }
              .ant-input:focus {
                box-shadow: none;
              }
              .inspector-table-code-btn-box{
                  height: 32px !important;
                  width: 110px;
              }
              .typeCheck-div {
  
                  // margin-bottom: 10px;
                  line-height: 1.8;
              }
              .ant-form {
                .ant-row {
                  margin-bottom: 0 !important;
                  margin-top: 20px;
                  // /deep/ input:-webkit-autofill {
                  //   -webkit-box-shadow: 0 0 0 0px transparent inset !important;
                  //   background-color: transparent !important;
                  // }
                  // input:-internal-autofill-previewed,
                  // input:-internal-autofill-selected {
                  //   // -webkit-text-fill-color: #FFFFFF !important;
                  //   outline: none;
                  //   transition: background-color 5000s ease-in-out 0s !important;
                  //   background-color: transparent !important;
                  // }
                  // /deep/ input:-internal-autofill-selected {
                  //     transition: background-color 5000s ease-in-out 0s !important;
                  //     background-color: transparent !important;
                  // }
                }
              }
          }
          .right-content-v{
              flex: 1;
              font-size:18px;
              .inspector-table-code-btn-box{
                  height: 32px;
                  width: 88px;
              }
              .typeCheck-div {
  
                  // margin-bottom: 10px;
                  line-height: 1.8;
              }
          }
          .email-suffix-v{
              display: flex;
              align-items: center;
          }
  
  
      }
      
    }
    .inspector-identity-form{
      .inspector-table-code-btn-box{
        height: 32px;
        width: 88px;
      }
      .ant-form-item{
        flex: 1;
      }
    }
    </style>
  
  